<template>
    <template v-if="data !== undefined">
        <el-table :id="containerID" :data="data.results" :height="240">
            <el-table-column
                v-for="(column, index) in Object.entries(props.chart.data.columns)"
                :key="index"
                :label="column[0]"
            >
                <template #default="scope">
                    {{
                        column[1].field === "DURATION" ? Utils.humanDuration(scope.row[column[0]]) : scope.row[column[0]]
                    }}
                </template>
            </el-table-column>
        </el-table>
        <Pagination
            v-if="props.chart.chartOptions?.pagination?.enabled"
            :total="data.total"
            :size="pageSize"
            :page="currentPage"
            @page-changed="handlePageChange"
        />
    </template>

    <NoData v-else :text="t('custom_dashboard_empty')" />
</template>

<script lang="ts" setup>
    import {computed, onMounted, ref, watch} from "vue";

    import {useI18n} from "vue-i18n";
    import NoData from "../../../../layout/NoData.vue";
    import Pagination from "../../../../layout/Pagination.vue";

    import {useStore} from "vuex";

    import {useRoute} from "vue-router";
    import {Utils} from "@kestra-io/ui-libs";
    import {decodeSearchParams} from "../../../../filter/utils/helpers.ts";

    const {t} = useI18n({useScope: "global"});

    const store = useStore();

    const route = useRoute();

    defineOptions({inheritAttrs: false});
    const props = defineProps({
        identifier: {type: [Number, String], required: true},
        chart: {type: Object, required: true},
        isPreview: {type: Boolean, required: false, default: false}
    });

    const containerID = `${props.chart.id}__${Math.random()}`;

    const dashboard = computed(() => store.state.dashboard.dashboard);

    const currentPage = ref(1);
    const pageSize = ref(10);

    const handlePageChange = (options) => {
        currentPage.value = options.page;
        pageSize.value = options.size;
        generate();
    };

    const data = ref();
    const generate = async () => {
        if (!props.isPreview) {
            let params = {
                id: dashboard.value.id,
                chartId: props.chart.id
            };
            if (route.query.namespace) {
                params.namespace = route.query.namespace;
            }
            if (route.query.labels) {
                params.labels = Object.fromEntries(route.query.labels.map(l => l.split(":")));
            }

            if (props.chart.chartOptions?.pagination?.enabled) {
                params.pageNumber = currentPage.value;
                params.pageSize = pageSize.value;
            }
            let decodedParams = decodeSearchParams(route.query, undefined, []);
            if (decodedParams) {
                params = {...params, filters: decodedParams}
            }
            data.value = await store.dispatch("dashboard/generate", params);
        } else {
            data.value = await store.dispatch("dashboard/chartPreview", props.chart.content)
        }
    };

    watch(route, async () => await generate());
    watch(
        () => props.identifier,
        () => generate(),
    );
    onMounted(() => generate());
</script>
